import { RawXmlContent } from 'easy-template-x';
import { Content } from './Content';
const _options = Symbol('options');

interface Options {
    margin?: number,
    width?: number,
    height?: number,
    value?: number,
}

export class ProcessBar extends Content implements RawXmlContent {
    _type: 'rawXml';
    xml: string;
    replaceParagraph?: boolean;
    constructor (percent: number) {
        super('rawXml');
        this.replaceParagraph = false;

       
        Object.defineProperty(this, _options, {
            enumerable: false,
            writable: true,
            value: {
                margin: 5,
                width: 100,
                height: 10,
                value: percent
            }
        })
        this.render();
    }

    setOptions(options: Options) {
        const originOptions = Object.getOwnPropertyDescriptor(this, _options).value as Options;
        // @ts-ignore
        this[_options] = Object.assign(originOptions, options);
        this.render();
    }

    render() {
        
        const options = Object.getOwnPropertyDescriptor(this, _options).value as Options;
        let width = options.width * 20; // 3000;
        let height = options.height * 20; // 200;
        let padding = 0;

        const realValue = Math.min(Math.abs(options.value), 1);
        const process = (width - padding * 4) * realValue;
        // this.xml =  `
        //         <w:pict>
        //             <v:group id="_x0000_s1031" o:spid="_x0000_s1031" o:spt="203" style="margin-top:${options.margin}pt;height:${options.height}pt;width:${options.width}pt;position:relative;z-index:251659264;mso-width-relative:page;mso-height-relative:page;" coordsize="${width},${height}">
        //                 <o:lock v:ext="edit" aspectratio="f"/>
        //                 <v:shape id="_x0000_s1030" o:spid="_x0000_s1030" o:spt="176" type="#_x0000_t176" style="position:absolute;left:0;height:${height};width:${width};" fillcolor="#FFFFFF" filled="t" stroked="t" adj="2700">
        //                     <v:path/>
        //                     <v:fill on="t" color2="#FFFFFF" focussize="0,0"/>
        //                     <v:stroke color="#558ED5" joinstyle="miter"/>
        //                     <v:imagedata o:title=""/>
        //                     <o:lock v:ext="edit" aspectratio="f"/>
        //                 </v:shape>
        //                 <v:shape id="_x0000_s1029" o:spid="_x0000_s1029" o:spt="176" type="#_x0000_t176" style="position:absolute;left:${padding * 2};top:${padding};height:${height - padding * 2};width:${process};" fillcolor="#558ED5" filled="t" stroked="f" adj="2700">
        //                     <v:path/>
        //                     <v:fill on="t" color2="#FFFFFF" focussize="0,0"/>
        //                     <v:stroke on="f"/>
        //                     <v:imagedata o:title=""/>
        //                     <o:lock v:ext="edit" aspectratio="f"/>
        //                 </v:shape>
        //             </v:group>
        //         </w:pict>
        // `

        this.xml = `
            <w:pict>
                <v:group id="_x0000_s1026" o:spid="_x0000_s1026" o:spt="203"
                    style="margin-top:${options.margin}pt;height:${options.height}pt;width:${options.width}pt;position:relative;z-index:251659264;mso-width-relative:page;mso-height-relative:page;"
                    coordorigin="${width},${height}" coordsize="${width},${height}"
                    o:gfxdata="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&#10;">
                    <o:lock v:ext="edit" aspectratio="f" />
                    <v:roundrect id="矩形: 圆角 1" o:spid="_x0000_s1026" o:spt="2"
                        style="position:absolute;left:${width};top:${height};height:${height};width:${width};v-text-anchor:middle;"
                        fillcolor="#D9D9D9 [2732]" filled="t" stroked="f"
                        arcsize="0.5"
                        o:gfxdata="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&#10;">
                        <v:fill on="t" focussize="0,0" />
                        <v:stroke on="f" weight="1pt" miterlimit="8" joinstyle="miter" />
                        <v:imagedata o:title="" />
                        <o:lock v:ext="edit" aspectratio="f" />
                    </v:roundrect>
                    <v:roundrect id="矩形: 圆角 1" o:spid="_x0000_s1026" o:spt="2"
                        style="position:absolute;left:${width};top:${height};height:${height};width:${process};v-text-anchor:middle;"
                        fillcolor="#07BBBF" filled="t" stroked="f"
                        arcsize="0.5"
                        o:gfxdata="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&#10;">
                        <v:fill on="t" focussize="0,0" />
                        <v:stroke on="f" weight="1pt" miterlimit="8" joinstyle="miter" />
                        <v:imagedata o:title="" />
                        <o:lock v:ext="edit" aspectratio="f" />
                    </v:roundrect>
                </v:group>
            </w:pict>
        `
    }

}